<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>图像处理测试页面 - 研发中心 - 肖世康</title>
  <script src="canvas.js" type="text/javascript"></script>
  <script type="text/javascript">
  try {
    document.createElement('canvas').getContext('2d');
  } catch (e) {
    alert('您的浏览器不支持HTML5的canvas，无法预览图像处理过程！建议您使用Chrome浏览器！');
  }
  // if (document.location.hostname == "") {
  //   alert("本页面必须在有效域名下进行预览，否则将引发跨域问题无法完成图像处理！即将自动跳转到本页面的线上部署地址！");
  //   window.location.href = "http://xsk.tehon.org/dev/zt/canvas/";
  // }
  </script>
</head>
<style type="text/css">
.grp {
  border: 1px solid orange;
  padding: 10px;
  margin: 10px 0;
}

a {
  padding: 3px 8px 5px;
  background-color: #f60;
  font: 16px/1.5 微软雅黑;
  cursor: pointer;
  color: white;
  border-radius: 2px;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

a:hover {
  background-color: red;
  color: yellow;
}

.tt {
  font: 36px/1.3 微软雅黑, "Hiragino Sans GB", SimSun;
}

input {
  border: 1px solid #f60;
  border-radius: 2px;
  padding: 2px 4px;
  width: 26px;
  font-size: 16px;
  margin: 0px 2px 3px 0px;
}

.hide {
  height: 0px;
  overflow: hidden;
}
</style>

<body>
  <div class="tt">
    图像处理测试页面（您的浏览器须支持HTML5） 肖世康
  </div>
  <div class="grp">
    <div class="imgs" id="ex01">
      <img src="../textdect/graph.jpg" id="img1" />
    </div>
    <div class="btns">
      <a onClick="ex01();">二值化处理</a>
      <a onClick="crack();">特征识别</a>
    </div>
  </div>
  <div class="grp">
    <div class="imgs" id="ex02">
      <img src="img.jpg" id="img2" />
    </div>
    <div class="btns">
      <a onClick="ex02();">灰度化</a>
    </div>
  </div>
  <div class="grp">
    <div class="imgs" id="ex03">
      <img src="img.jpg" id="img3" />
    </div>
    <div class="btns">
      <a onClick="ex03();">亮度调整</a>
    </div>
  </div>
  <div class="grp">
    <div class="imgs" id="ex04">
      <img src="img.jpg" id="img4" />
    </div>
    <div class="btns">
      <a onClick="ex04();">半透明</a>
    </div>
  </div>
  <div class="grp">
    <div class="imgs" id="ex05">
      <img src="img.jpg" id="img5" />
    </div>
    <div class="btns">
      <a onClick="ex05();">锐化</a>
    </div>
  </div>
  <div class="grp">
    <div class="imgs" id="ex06">
      <img src="img.jpg" id="img6" />
    </div>
    <div class="btns">
      <a onClick="ex06();">模糊</a>
    </div>
  </div>
  <div class="grp">
    <div class="imgs" id="ex07">
      <img src="img.jpg" id="img7" />
    </div>
    <div class="btns">
      <a onClick="ex07();">浮雕</a>
    </div>
  </div>
  <div class="grp">
    <div class="imgs" id="ex08">
      <img src="img.jpg" id="img8" />
    </div>
    <div class="btns">
      <a onClick="ex08();">反色</a>
    </div>
  </div>
  <div class="grp">
    <div class="imgs" id="ex09">
      <img src="img.jpg" id="img9" />
    </div>
    <div class="btns">
      <a onClick="ex09();">横向边缘检测</a>
    </div>
  </div>
  <div class="grp">
    <div class="imgs" id="ex10">
      <img src="img.jpg" id="img10" />
    </div>
    <div class="btns">
      <a onClick="ex10();">对比度增强</a>
    </div>
  </div>
  <div class="grp">
    <div class="imgs" id="ex11">
      <img src="img.jpg" id="img11" />
    </div>
    <div class="btns">
      <a onClick="ex11();">索贝尔横向边缘检测</a>
    </div>
  </div>
</body>

</html>
